<template>
  <div class="test">
    <!-- 使用 v-chart 组件渲染 ECharts 图表 -->
    <!-- <h1>this is the sixth</h1> -->
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { GlobeComponent } from 'echarts-gl/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([GlobeComponent, CanvasRenderer])

export default {
  name: 'Echartssixth',
  components: {
    VChart
  },
  provide: {
    // [THEME_KEY]: 'dark',
  },
  data() {
    //   const ROOT_PATH = 'https://echarts.apache.org/examples';
    const ROOT_PATH = '/echarts/examples'
    return {
      option: {
        backgroundColor: '#000',
        globe: {
          baseTexture: `${ROOT_PATH}/data-gl/asset/earth.jpg`,
          heightTexture: `${ROOT_PATH}/data-gl/asset/bathymetry_bw_composite_4k.jpg`,
          displacementScale: 0.1,
          shading: 'lambert',
          environment: `${ROOT_PATH}/data-gl/asset/starfield.jpg`,
          light: {
            ambient: {
              intensity: 0.1
            },
            main: {
              intensity: 1.5
            }
          },
          layers: [
            {
              type: 'blend',
              blendTo: 'emission',
              texture: `${ROOT_PATH}/data-gl/asset/night.jpg`
            },
            {
              type: 'overlay',
              texture: `${ROOT_PATH}/data-gl/asset/clouds.png`,
              shading: 'lambert',
              distance: 5
            }
          ]
        },
        series: []
      }
    }
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 50px;
  position: relative; /* 确保 z-index 生效 */
  z-index: 1; /* 确保组件显示在下方 */
}

.test {
  position: relative;
  width: 100%;
  /* background-color: aqua; */
  height: 50px;
  z-index: 1;

}
</style>
<!-- <style scoped>
.chart {
  /* position: absolute; */
  width: 100%;
  height: 400px;
  /* z-index: 1; */

}
.test{
  position: relative;
  width: 100%;
  background-color: aqua;
  height: 400px;
  z-index: 1;
}
</style> -->
